HTMLify

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: 0;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.container {
	background-image: url('https://images.unsplash.com/photo-1563985336376-568060942b80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80');
	background-size: cover;
	height: 100vh;
	overflow: hidden;
	width: 100%;
}

.container span {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 5px #000000;
	display: inline-flex;
	height: 40px;
	width: 9.8%;
}

.container span.fall {
	-webkit-animation: fall 2s linear forwards;
	        animation: fall 2s linear forwards;
	background-color: #ff0000;
	pointer-events: none;
	transition: 0.2s ease all;
	z-index: 1000;
}

@-webkit-keyframes fall {
	to {
		transform: translateY(1000px) rotateZ(20deg);
	}
}

@keyframes fall {
	to {
		transform: translateY(1000px) rotateZ(20deg);
	}
}